<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Vite App</title>
    <style>
        .wrapper {
            font-size: 25px; /* 1em */
            width: 8em;
            height: 8em;
            position: relative;
            margin: 100px auto;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            border: 1em dashed rgba(138, 189, 195, 0.5);
            box-shadow: inset 0 0 2em rgba(255, 255, 255, 0.3),
            0 0 0 0.7em rgba(255, 255, 255, 0.3);
            line-height: 6em;
            text-align: center;
            font-family: 'Racing Sans One', "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif;
            color: #444;
            text-shadow: 0 .04em rgba(255, 255, 255, 0.9);
            -webkit-animation: steam 3.5s linear infinite;
            animation: steam 3.5s linear infinite;
        }

        .wrapper:after,
        .wrapper:before {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            z-index: -1;
            border-radius: inherit;
            box-shadow: inset 0 0 2em rgba(255, 255, 255, 0.3);
            border: 1em dashed rgba(138, 189, 195, 0.2);
        }

        .wrapper:before {
            top: 1em;
            bottom: 1em;
            right: 1em;
            left: 1em;
            border: 1em dashed rgba(138, 189, 195, 0.4);
        }

        .inner {
            width: 100%;
            height: 100%;
            -webkit-animation: steam 3.5s linear reverse infinite;
            animation: steam 3.5s linear reverse infinite;
            cursor: none;
        }

        .inner span {
            display: inline-block;
            -webkit-animation: loading-1 1.5s ease-out infinite;
            animation: loading-1 1.5s ease-out infinite;
            margin-right: 3px;
            margin-left: 3px;
        }

        .inner span:nth-child(1) {
            -webkit-animation-name: loading-1;
            animation-name: loading-1;
        }

        .inner span:nth-child(2) {
            -webkit-animation-name: loading-2;
            animation-name: loading-2;
        }

        .inner span:nth-child(3) {
            -webkit-animation-name: loading-3;
            animation-name: loading-3;
        }

        .inner span:nth-child(4) {
            -webkit-animation-name: loading-4;
            animation-name: loading-4;
        }

        .inner span:nth-child(5) {
            -webkit-animation-name: loading-5;
            animation-name: loading-5;
        }

        .inner span:nth-child(6) {
            -webkit-animation-name: loading-6;
            animation-name: loading-6;
        }

        .inner span:nth-child(7) {
            -webkit-animation-name: loading-7;
            animation-name: loading-7;
        }

        @-webkit-keyframes steam {
            from {
            }
            to {
                -webkit-transform: rotate(360deg);
            }
        }

        @keyframes steam {
            from {
            }
            to {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        @-webkit-keyframes loading-1 {
            0% {
            }
            14.28% {
                opacity: 0.3;
            }
        }

        @-webkit-keyframes loading-2 {
            0% {
            }
            28.57% {
                opacity: 0.3;
            }
        }

        @-webkit-keyframes loading-3 {
            0% {
            }
            42.86% {
                opacity: 0.3;
            }
        }

        @-webkit-keyframes loading-4 {
            0% {
            }
            57.14% {
                opacity: 0.3;
            }
        }

        @-webkit-keyframes loading-5 {
            0% {
            }
            71.43% {
                opacity: 0.3;
            }
        }

        @-webkit-keyframes loading-6 {
            0% {
            }
            85.71% {
                opacity: 0.3;
            }
        }

        @-webkit-keyframes loading-7 {
            0% {
            }
            100% {
                opacity: 0.3;
            }
        }

        @keyframes loading-1 {
            0% {
            }
            14.28% {
                opacity: 0.3;
            }
        }

        @keyframes loading-2 {
            0% {
            }
            28.57% {
                opacity: 0.3;
            }
        }

        @keyframes loading-3 {
            0% {
            }
            42.86% {
                opacity: 0.3;
            }
        }

        @keyframes loading-4 {
            0% {
            }
            57.14% {
                opacity: 0.3;
            }
        }

        @keyframes loading-5 {
            0% {
            }
            71.43% {
                opacity: 0.3;
            }
        }

        @keyframes loading-6 {
            0% {
            }
            85.71% {
                opacity: 0.3;
            }
        }

        @keyframes loading-7 {
            0% {
            }
            100% {
                opacity: 0.3;
            }
        }
    </style>
</head>
<body>
<div id="app">
    <div id="appProvider" style="display: none"></div>
    <div style="width: 100vw;height: 100vh;display: flex;justify-content: center;align-items: center">
        <section style="position: relative;">
            <!-- the component -->
            <div class="wrapper">
                <div class="inner" style="display: flex;justify-content: center;align-items: center;cursor: none">
                    <span>L</span>
                    <span>o</span>
                    <span>a</span>
                    <span>d</span>
                    <span>i</span>
                    <span>n</span>
                    <span>g</span>
                </div>
            </div>
        </section>
    </div>
</div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
